<template>
  <BaseDialog
    ref="dialogRef"
    :title="title"
    :showCancelButton="false"
    buttonText="关闭"
    @dialogSubmit="dialogSubmit"
  >
    <template #dialog_body style="height:50vh;overflow: auto;">
      <SysPermissionTree
        ref="treeRef"
        :data="tree"
      />
    </template>
  </BaseDialog>
</template>

<script lang="ts" setup>
import BaseDialog from '@/components/base/dialog/BaseDialog.vue';
import SysPermissionTree from '@/components/uem/SysPermissionTree.vue';
import {
  defineExpose, defineProps, getCurrentInstance, ref,
} from 'vue';
import { Role } from '@/types/interface/auth_interface';
import { ElMessage, ElTree } from 'element-plus';
import { TableData } from '@/types/interface/base_interface';
import { Tree } from 'element-plus/es/components/tree-v2/src/types';

const { proxy } = getCurrentInstance(); // 使用proxy代替ctx，因为ctx只在开发环境有效
const dialogRef = ref(); // 对话框ref对象
// 定义树形菜单的ref对象
const treeRef = ref();
const tree = ref<Tree[]>([]);// 定义树形菜单
const title = ref<string>();
// 打开对话框，gong供父组件调用，传入表单对象
const openDialog = async (userId: number, isMenu:boolean) => {
  if (isMenu) {
    title.value = '菜单预览';
  } else {
    title.value = '权限预览';
  }
  // 获取树形权限
  const formObj = { // 封装要传递的表单数据
    isMenu,
  };
  // 从服务端读取记录
  const resData = await new proxy.$Request(`${proxy.$urls.API_URL_BACKSTAGE_USER_PERMISSION.replace('{userId}', userId)}`, formObj).get();
  if (resData.success) {
    // 设置该角色的菜单值
    tree.value = resData.data;
  }
  // 打开对话框，先初始化树形菜单
  dialogRef.value!.openDialog();
};
// 关闭对话框
const dialogSubmit = () => {
  dialogRef.value!.closeDialog();
};
// 暴露组件给父容器使用
defineExpose({
  openDialog,
});
</script>

<style scoped>

</style>
